<template>
  <div :loading="!balance.balance">
    <div id="summary" class="alert alert-primary">
      <span class="h2" style="margin-right:20px;">
        账户余额: {{balance.balance/100 | currency('￥')}}
      </span>
      <span class="h2" v-if="balance.credit > 0" style="margin-right:20px;">
        信用额度: {{balance.credit/100 | currency('￥')}}
      </span>
      <span class="h2" style="margin-right:20px;">
        可用额度: {{(balance.balance + balance.credit)/100 | currency('￥')}}
      </span>
      <span class="h2" style="margin-right:20px;">
        账户状态: {{BalanceStatus[balance.status]}}
      </span>
    </div>
    <div class="box">
      <div class="box-body mgt20">
        <el-form :model="query" label-position="top">
          <el-row :gutter="20">
            <el-col :span="5">
              <el-form-item label="收支类型:">
                <el-select v-model="query.eventType" clearable placeholder="选择收支类型">
                  <el-option v-for="(value, key) in BalanceEventType" :key="key" :label="value" :value="key"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="业务时间:">
                <el-date-picker v-model="query.range" type="daterange" placeholder="选择日期范围"
                  :picker-options="businessDateRangeOpts">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="" class="no-top-label">
                <el-button type="primary" icon="search" @click="loadPage(1)">检索</el-button>
                <!-- <el-button @click="">导出对账单</el-button> -->
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  
    <el-table :data="page.content" v-loading.body="loading" border>
      <el-table-column prop="createdOn" label="业务时间" width="175" />
      <el-table-column prop="eventType" label="收支类型" >
        <template slot-scope="scope">
          {{BalanceEventType['' + scope.row.eventType]}}
        </template>
      </el-table-column>
      <el-table-column prop="eventId" label="相关单据" width="175" />
      <el-table-column prop="changeAmount" label="收支(￥)" align="right">
        <template slot-scope="scope">
          <span :class="{'font-success': scope.row.changeAmount > 0}">
            <span v-if="scope.row.changeAmount > 0">+</span>{{scope.row.changeAmount/100 }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="currentBalance" label="余额(￥)" align="right">
        <template slot-scope="scope">
          {{scope.row.currentBalance/100}}
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" />
    </el-table>
  
    <!-- pagination -->
    <el-pagination @current-change="showPage" :current-page.sync="page.page" :page-size="page.pageSize" 
      :total="page.totalElements" layout="total, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>

<script>
import * as Constants from '@/constants'
import Pagination from '@/utils/pagination'

export default {
  name: 'dtb-balance',
  props: {
    fetchBalanceMethod: {
      type: Function,
      required: true
    },
    fetchBalanceDetailsMethod: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      ...Constants,
      loading: true,
      businessDateRangeOpts: {
        disabledDate: function(time) {
          return time.getTime() > Date.now()
        }
      },
      balance: {},
      query: {
        eventType: '',
        range: null
      },
      page: {
        content: []
      }
    }
  },
  created () {
    this.fetchBalanceMethod().then((balance) => {
      this.balance = balance
      this.loadPage(1)
    })
  },
  methods: {
    ...Pagination,
    list(page, query) {
      this.loading = true
      let transfer = Object.assign({dtbId: this.balance.dtbId}, query)
      if (transfer.range && transfer.range.length === 2) {
        transfer.startDate = transfer.range[0]
        transfer.endDate = transfer.range[1]
      }

      return this.fetchBalanceDetailsMethod(transfer).then((data) => {
        this.page = data
        this.loading = false
      })
    }
  }
}
</script>
